By

文章目录
  1. 1. 应用
  2. 2. 实例
  3. 3. 参考

最近在 用weex 实现一个小应用要用到地理定位，所以找来看看咯。

应用

地理定位其实是一个很容易实现的功能，对于web应用开发者来说。因为Geolocation 是HTML5 规范中第一批被完整包含并实现的功能，并且可在所有主流浏览器中使用它。

  1. 当然对于早期的浏览器来说最好做一下浏览器支持性检查:

    1
    2
    3
    4
    5
    6
    7
    function loadCheck(){
      if(navigator.geolocation){
        document.getElementById("support").innerHTML = "supported";
      }else{
        document.getElementById("support").innerHTML = "not supported";
      }
    }

  2. 目前有两种位置请求：

    单次定位请求 navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);
    重复性的位置更新请求 navigator.geolocation.watchPosition(successCallback,errorCallback);

    我们在实际使用的时候主要也就是使用这两个核心的API。所以其实很简单的。
    navigator.geolocation.getCurrentPosition() 这个函数因为像获取位置数据这样的操作可能需要较长时间才能完成，所以是异步的处理。

  3. successCallback 是收到实际位置信息并进行处理的地方。这个successCallback 函数只接收一个参数：位置对象。这个对象包含坐标（coords 特性）和一个获取位置数据时的时间戳。这个coords前三个特性:

    latitude（纬度）
    longitude (经度)
    accuracy （准确度）

    latitude 与longitude 将包含HTML5 Geolocation 服务测定的最佳的十进制用户位置。accuracy 将以m 为单位指定纬度和经度值与实际位置间的差距。对于在移动端的浏览器可能还支持其他的特性。

    altitude 用户位置的海拔高度
    altitudeAccuracy 海拔高度的准确度
    heading 行进方向，对于正北而言
    speed 地面速度

    位置计算服务很可能会出差错，所以Geolocation应用程序来说错误处理非常重要。errorCallback定义了所有需要处理的错误情况的错误编号，错误编号设置在错误对象中，错误对象作为code参数传递给错误处理程序。

    PERMISSION_DENIED(错误编号1)—用户选择拒绝浏览器获得其位置信息
    POSITION_UNAVAILABLE(错误编号2)—尝试获取用户位置信息，但是失败了。
    TIMEOUT (错误编号3)—设置了可选的timeout值，尝试确定用户位置的过程超时。

    对于可选参数对象来说，有三个值可以设置：enableHighAccuracy timeout 和maximumAge 。这三个参数可以使用JSON对象传递，这样更便于添加到HTML5 Geolocation 请求调用中。

    enableHighAccuracy ： 默认是false、是否通知浏览器启用HTML5 Geolocation服务的高精度模式。如果启用此参数，可能没有任何差别，也可能会导致更多的时间和资源来确定位置。
    timeout：ms 为单位 ，告诉浏览器计算当前位置所允许的最长时间。如果在这个事件段内未完成计算，就会调用错误处理程序，其默认值是Infinity 。
    maximumAge :表示浏览器重亲计算位置的时间间隔，ms 为单位。默认值是0，即 浏览器每次请求时必须立即重新计算位置。

  4. 重复性的位置更新请求 ： navigator.geolocation.watchPosition(successCallback,errorCallback). 只要用户位置发生变化，geolocation 服务会调用successCallback 处理程序，它的效果就像是程序在监视用户的位置，并会在其变化时及时通知用户。
    若应用程序不再需要接收有关用户的持续位置更新，可调用clearWatch()函数 navigator.geolocation.clearWatch(watchId).这个watchId 表示一个唯一的监视请求以便将来取消监视。

实例

可以使用watchPisition()来进行计算距离：每当有新的位置返回，就将其与最后保存的位置进行比较。距离计算可以使用Haversine公式，代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Number.prototype.toRadians = function(){
  return this.Math.PI/180;
}
function distance(latitude1,longitude1,latitude2,longitude2){
  // R 地球半径
  var R = 6371;
  var detalLatitude = (latitude2- latitude1).toRadians();
  var detalLongitude = (longitude2 - longitude1).toRadians();
  latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();
  var a = Math.sin(detalLatitude/2)*
          Math.sin(detalLatitude/2)+
          Math.cos(latitude1)*
          Math.cos(latitude2)*
          Math.sin(deltaLongitude/2)*
          Math.sin(deltaLongitude/2);
  var c = 2* Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
  var d = R*C;
  return d;
}

计算距离

1
2
3
4
5
6
if((lastLat != null) && (lastLong != null)){
   var currentDistance = distance(latitude,longitude,lastLat,lastLong);
   totalDistance += currentDistance;
}
lastLat = latitude;
lastLong = longitude;

参考

  1. 《HTML5程序设计(第2版)》第5章
文章目录
  1. 1. 应用
  2. 2. 实例
  3. 3. 参考